<template>
  <div>
    <div>
      <FilterTable ref="table" height="300" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" :datakey="'rows'" :dataSource="list" :onColumnsChange="columns => (this.columns = columns)" />
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer">取 消</el-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { getActivityCode } from '@/api/repair/activitiesManage/activitiesQuery';
import { dictionary } from '@/utils/dictMixin';
import { getDealerUser } from '@/api/part/partInventory/partInventory/index.js';
export default {
  name: 'detailActivityVehicle',
  components: {},
  mixins: [dictionary],
  props: {
    activityCode: String
  },
  data() {
    this.BaseTable = null;
    return {
      serviceAdvisorData: [],
      fetchApi: getActivityCode,
      fetchParams: { xhrAbort: true },
      list: [],
      columns: this.createTableColumns()
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  created() {
    this.getEmp();
    var val = { activityCode: this.activityCode };
    this.fetchParams = Object.assign(val, { xhrAbort: false });
  },
  methods: {
    // 获取员工信息并转义
    async getEmp() {
      const res = await getDealerUser();
      this.serviceAdvisorData = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
      // this.columns.find(x => x.dataIndex === 'CREATED_BY').editItems = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
      // this.columns.find(x => x.dataIndex === 'LOCK_USER').editItems = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '车主编号',
          dataIndex: 'owner_no',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '发动机',
          dataIndex: 'engine_no',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '品牌',
          dataIndex: 'brand_code',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'series_name',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'model_name',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '送修人',
          dataIndex: 'deliverer',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '送修人手机',
          dataIndex: 'deliverer_mobile',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '送修人电话',
          dataIndex: 'deliverer_phone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务顾问',
          dataIndex: 'service_advisor',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.getEmployeeName(props.row.service_advisor)}</span>;
          }
        },
        {
          title: '创建人',
          dataIndex: 'created_by',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.getEmployeeName(props.row.created_by)}</span>;
          }
        },
        {
          title: '建档日期',
          dataIndex: 'found_date',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '参加活动日期',
          dataIndex: 'ro_create_date',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        }
      ];
    },
    delRowsHandle() {
      this.BaseTable.EXECUTE_DELETE();
    },
    // 转换数据
    getEmployeeName(userId) {
      const item = this.serviceAdvisorData.find(x => {
        return x.value == userId;
      });
      return item ? item.text : '';
    },
    closeDrawer() {
      this.$emit('close', false);
    }
  }
};
</script>
